<template>
	<view class="fill">
		<view class="fill-head">
			<view v-if="baseInfo">{{baseInfo.city}} | {{baseInfo.subject_type_str}} | {{baseInfo.chinese+baseInfo.math+baseInfo.english+baseInfo.synthesize}}分</view>
			<view>2020年最低分 xxx 位次 xxxx</view>
		</view>
		<view class="fill-tabs">
			<view :class="tabsAction.id==item.id?'tab-active':''" v-for="(item,i) in tabList">{{item.title}}</view>
			<u-icon name="plus-circle-fill" size="50" color="#45b688" class="icon"></u-icon>
		</view>
		<view class="">
			<u-tabs :list="volunterList" :is-scroll="true" :current="current" @change="change" active-color="#45b688"></u-tabs>
			<view>
				<view class="fill-edit">
					<view v-if="!editShow" @click="editShow = !editShow">编辑</view>
					<view v-if="editShow">确定</view>
					<view v-if="editShow" @click="editShow = !editShow">取消</view>
				</view>
				<view class="fill-volunteer">
					<view class="fill-volunteer-lf">
						<view>院校1志愿</view>
						<view class="fill-volunteer-text1">广西大学</view>
					</view>
					<view class="fill-volunteer-rt">
						<view class="fill-volunteer-text1">专业志愿</view>
						<view class="fill-volunteer-text2">电器类</view>
						<view class="fill-volunteer-text2">工商管理类</view>
						<view class="fill-volunteer-text2">建筑类</view>
					</view>
				</view>
				<view class="fill-volunteer">
					<view class="fill-volunteer-lf">
						<view>院校2志愿</view>
						<view class="fill-volunteer-text1">广西民族大学</view>
					</view>
					<view class="fill-volunteer-rt">
						<view class="fill-volunteer-text1">专业志愿</view>
						<view class="fill-volunteer-text2">电器类</view>
						<view class="fill-volunteer-text2">工商管理类</view>
						<view class="fill-volunteer-text2">建筑类</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-select v-model="batchShow" :list="batchList" @confirm="confirm1" confirm-color="#20b86f"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{id:1,title:'本科一批'}],
				tabsAction: {id:1,title:'本科一批'},
				batchShow: false,
				batchList: [
					{
						value: '2',
						label: '本科二批'
					}
				],
				current: 0,
				volunterList: [{
					name: '志愿A'
				},{
					name: '志愿B'
				}],
				editShow: false,
				baseInfo: ''
			}
		},
		onLoad() {
			this.check_my_info();
		},
		methods: {
			goto(name) {
				uni.navigateTo({
					url: name
				});
			},
			change(index) {
				this.current = index;
			},
			// 添加
			confirm1(e) {
				let item = {
					id: e[0].value,
					title: e[0].label
				}
				this.tabsAction = item;
				this.tabList.push(item);
			},
			check_my_info() {
				this.http({
					url: `api/v1/users/check_my_info`,
					method: 'GET',
					success: res => {
						if(res.errcode == 0) {
							if(res.result.grade_detail){
								this.baseInfo = res.result.grade_detail;
							}
						}
					},
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.fill-head {
		background-color: #45b688;
		text-align: center;
		color: #FFFFFF;
		font-weight: bold;
		padding-top: 100rpx;
		padding-bottom: 60rpx;
		>view:first-child {
			margin-bottom: 10rpx;
		}
	}
	.fill-tabs {
		padding: 20rpx 30rpx 10rpx 30rpx;
		border: 1px solid #F1F1F1;
		>view {
			display: inline-block;
			border-bottom: 2px solid transparent;
			padding: 16rpx 0;
			margin-right: 20rpx;
		}
		.tab-active {
			border-bottom: 2px solid #45b688;
		}
		.icon {
			vertical-align: middle;
		}
	}
	.fill-edit {
		text-align: right;
		padding: 20rpx 0;
		>view {
			display: inline-block;
			border-radius: 50rpx;
			padding: 2rpx 20rpx;
			border: 1px solid #999;
			font-size: 24rpx;
			margin-right: 20rpx;
		}
	}
	.fill-volunteer {
		overflow: hidden;
		text-align: center;
		background-color: #FFFFFF;
		padding: 16rpx 0;
		margin-bottom: 20rpx;
		.fill-volunteer-lf {
			float: left;
			width: 30%;
			.fill-volunteer-text1 {
				margin-top: 80rpx;
			}
		}
		.fill-volunteer-rt {
			float: right;
			width: 70%;
			.fill-volunteer-text1 {
				margin-bottom: 26rpx;
			}
			.fill-volunteer-text2 {
				margin-bottom: 16rpx;
			}
		}
	}
</style>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
